<template>
  <div class="consulting-service">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img
          src="https://image.32yx.com/news/banner/1318838758559977.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://image.32yx.com/news/banner/1318838758559977.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://image.32yx.com/news/banner/1318838758559977.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://image.32yx.com/news/banner/1318838758559977.jpg"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <ul class="Icon">
      <li @click="industry">
        <div class="image icon-yejie"></div>
        业界
      </li>
      <li @click="cuttingEdgeNews">
        <div class="image icon-qingbao"></div>
        情报
      </li>
      <li @click="evaluate">
        <div class="image icon-manping"></div>
        漫评
      </li>
      <li @click="special">
        <div class="image icon-zhuanti"></div>
        专题
      </li>
    </ul>
    <ul class="hotspot">
      <li v-for="(item, index) in image" :key="index">
        <div class="title">
          <p>{{ item.name }}</p>
          <div>
            <span>{{ item.time }}</span>
            <span><i class="ift-eye-open"></i>{{ item.quantity }}</span>
          </div>
        </div>
        <a class="imgs" href="https://www.kanman.com/news/qingbao/411676.html">
          <img :src="item.url" alt="" />
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image: [
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
      ],
    };
  },
  methods:{
    industry(){
      this.$router.push("/find/industry")
    },
    cuttingEdgeNews(){
      this.$router.push("/find/cuttingEdgeNews")
    },
    evaluate(){
      this.$router.push("/find/evaluate")
    },
    special(){
      this.$router.push("/find/special")
    }
  }
};
</script>
<style lang="less">
.consulting-service {
  padding: 60px 0;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .Icon {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2%;
    li {
      width: 25%;
      font-size: 14px;
      margin: 2% 0;
      text-align: center;
      div {
        margin: 1% auto;
        width: 42px;
        height: 42px;
        background-image: url(../../assets/咨询.png);
        background-size: 670%;
        background-repeat: no-repeat;
      }
      .icon-yejie {
        background-position: 87% 20%;
      }
      .icon-qingbao {
        background-position: 69% 40%;
      }
      .icon-manping {
        background-position: -1% 60%;
      }
      .icon-zhuanti {
        background-position: -1% 101%;
      }
    }
  }
  .hotspot {
    width: 96%;
    margin: 0 auto;
    height: 100vh;
    li {
      font-size: 14px;
      height: 12%;
      margin: 5% 0;
      &:nth-last-child(1) {
        padding-bottom: 70px;
      }
      .title {
        width: 68%;
        height: 100%;
        display: inline-block;
        position: relative;
        p {
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        div {
          width: 100%;
          position: absolute;
          bottom: 0;
          font-size: 12px;
          color: #999;
          display: flex;
          justify-content: space-between;
          i {
            padding-right: 5%;
          }
        }
      }
      .imgs {
        float: right;
        height: 100%;
        width: 30%;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          position: absolute;
          top: -40%;
          left: 0;
        }
      }
    }
  }
}
</style>